<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
    <!-- 年检预警配置-->
    <el-card class="box-card" shadow="never">
      <div slot="header" class="header-card">
        <span class="header-card-title">年检预警配置 </span>
      </div>
      <el-row>
        <div v-for="(item,index) in ruleForm.rows" :key="item.configKey">
          <el-col :span="24">
            <el-form-item label-width="145px" :label="`${item.configName}:`"
                          :prop="`rows.${index}.configValue`"
                          :rules="{required:true,message:item.configName,trigger:'blur'}">
              <el-input v-model="item.configValue" :disabled="item.configKey === 'inspection_warn'" @change="handleDay(item,'configValue')">
                <el-switch v-model="item.configSwitch" :active-value="1" :inactive-value="2" slot="prepend"/>
                <template v-if="item.configKey === 'inspection_day'" slot="append">天</template>
              </el-input>
            </el-form-item>
          </el-col>
        </div>
      </el-row>
    </el-card>
  </el-form>
</template>

<script>
export default {
  name: "inspection",
  props: {
    value: {
      type: Object,
      default: {},
    },
  },
  computed: {
    ruleForm: {
      get() {
        let that = this
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key)
          },
          set(target, key, value) {
            that.$emit('input', {...target, [key]: value})
            return true
          }
        })
        return proxy
      }
    },

  },
  watch: {},
  data() {
    return {
      rules: {}
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleDay(val, key) {
      if (!val[key]) return
      const regex = /^[1-9]\d*$/;
      if (!regex.test(val[key])) {
        val[key] = ''
      } else {
        val[key] = val[key]
      }
    },

    handleEffect() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            resolve();
          } else {
            reject();
          }
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/styles/cwgd/formScss.scss";

::v-deep .el-input-group__prepend {
  background: white;
  padding: 0 10px;
}

::v-deep .el-input-group__append {
  background: white;
  padding: 0 10px;
}

::v-deep .last-card {
  margin-bottom: 0 !important;
}
.box-card{
  margin-bottom: 0!important;
}
</style>

